<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                VUE测试
            </title>
            <script src="../../js/vue.min.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>
        <div id="app">
            <div>
                <button @click="addWord">
                    添加
                </button>
                <button @click="subWord">
                    删除
                </button>
                <button @click="merge">
                    合并
                </button>
                <button @click="merge2">
                    合并2
                </button>
                <button @click="mergeNull">
                    合并 NULL
                </button>
            </div>
            <p v-for="item in appList1">
                {{ item }}
            </p>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                index: 1,
                appList1: ["你好","中午吃啥","天气不错"],
                appList2: ["饼干","馒头","可口可乐"],
                appList3: null
            },
            methods:{
                addWord: function() {
                    this.appList1.push("test_" + this.index);
                    this.index++;
                },
                subWord: function() {
                    this.appList1.splice(0, 1);
                },
                merge: function() {
                    this.appList1 = [...this.appList1, ...this.appList2];
                },
                merge2: function() {
                    this.appList1 = this.appList1.concat(this.appList2);
                },
                mergeNull: function() {
                    this.appList1 = [...this.appList1, ...this.appList3];
                }
            }
        });
    </script>
</html>
